<template>
  <div class="dashboard-editor-container" :style="{backgroundImage: 'url(' + bgImg + ')' }">
    <div class="app-container">
      <div class="filter-container">
        <!--<div class="top">
          <span>账户信息列表页</span>
          <router-link to="/dashboard">
            &lt;!&ndash;<img style="width:23px;height:100%;" src="../../assets/xiazai44.png" alt="">&ndash;&gt;
            <i class="el-icon-back"></i>
            返回
          </router-link>
        </div>-->

        <topback title="账户信息列表页"/>

        <div class="handle-add" style="padding: 0 20px 30px 20px; display: flex">

          <el-menu default-active="5" style="border: 0; width:20%" class="el-menu-vertical-demo" v-if="id == 1">
            <el-menu-item index="4" @click="active5" style="font-size: 15px;height: 48px">
              <!--<i class="el-icon-tickets" style="font-size: 18px"></i>-->
              <svg-icon icon-class="user" style="color: #ff4d51;"></svg-icon>
              <span slot="title">个人信息</span>
            </el-menu-item>
            <el-menu-item index="2" @click="active2" style="font-size: 15px">
              <svg-icon icon-class="shimingrenzheng" style="color: #FFB302;"></svg-icon>
              <span slot="title">实名认证</span>
            </el-menu-item>
            <el-menu-item index="3" @click="active3" style="font-size: 15px">
              <!--<i class="el-icon-phone" style="font-size: 18px"></i>-->
              <svg-icon icon-class="shouji" style="color: #c4c86b;"></svg-icon>
              <span slot="title">修改手机号</span>
            </el-menu-item>
            <el-menu-item index="1" @click="active1" style="font-size: 15px">
              <svg-icon icon-class="password" style="color: #13ce66;"></svg-icon>
              <span slot="title">修改密码</span>
            </el-menu-item>
            <el-menu-item index="5" @click="active4" style="font-size: 15px">
              <svg-icon icon-class="guide" style="color: #0077aa;"></svg-icon>
              <span slot="title">分享推广</span>
            </el-menu-item>
            <el-menu-item index="6" @click="active6" style="font-size: 15px">
              <svg-icon icon-class="piaofang" style="color: #b3450e;"></svg-icon>
              <span slot="title">贴现记录查询</span>
            </el-menu-item>
            <el-menu-item index="7" @click="active7" style="font-size: 15px;">
              <svg-icon icon-class="yongjinguanli" style="color: #b3450e;"></svg-icon>
              <span slot="title">佣金提现</span>
            </el-menu-item>
          </el-menu>

          <el-menu default-active="4" style="border: 0; width:20%" class="el-menu-vertical-demo" v-else>
            <el-menu-item index="4" @click="active4" style="font-size: 15px;height: 48px">
              <svg-icon icon-class="user" style="color: #ff4d51;"></svg-icon>
              <span slot="title">个人信息</span>
            </el-menu-item>
            <el-menu-item index="2" @click="active2" style="font-size: 15px">
              <!--<i class="el-icon-setting" style="font-size: 18px"></i>-->
              <svg-icon icon-class="shimingrenzheng" style="color: #FFB302;"></svg-icon>
              <span slot="title">实名认证</span>
            </el-menu-item>
            <el-menu-item index="3" @click="active3" style="font-size: 15px">
              <svg-icon icon-class="shouji" style="color: #c4c86b;"></svg-icon>
              <span slot="title">修改手机号</span>
            </el-menu-item>
            <el-menu-item index="1" @click="active1" style="font-size: 15px">
              <!--<i class="el-icon-edit-outline" style="font-size: 18px"></i>-->
              <svg-icon icon-class="password" style="color: #13ce66;"></svg-icon>
              <span slot="title">修改密码</span>
            </el-menu-item>
            <el-menu-item index="5" @click="active5" style="font-size: 15px">
              <svg-icon icon-class="guide" style="color: #0077aa;"></svg-icon>
              <span slot="title">分享推广</span>
            </el-menu-item>
            <el-menu-item index="6" @click="active6" style="font-size: 15px">
              <svg-icon icon-class="piaofang" style="color: #b3450e;"></svg-icon>
              <span slot="title">贴现记录查询</span>
            </el-menu-item>
            <el-menu-item index="7" @click="active7" style="font-size: 15px;">
              <svg-icon icon-class="yongjinguanli" style="color: #b3450e;"></svg-icon>
              <span slot="title">佣金提现</span>
            </el-menu-item>
          </el-menu>

          <div style="width: 100%" v-if="id == 1">
            <!--个人基本信息-->
            <account-inform v-if="show5"/>
            <!--实名认证-->
            <realcheck v-if="show2"/>
            <!--修改手机号-->
            <chgphone v-if="show3"/>
            <!--修改密码-->
            <chgpwd v-if="show1"/>
            <!--推广码-->
            <regist :id="id" v-if="show4"/>
            <!--贴现记录查询-->
            <recordsearch v-if="show6"/>
            <cashout v-if="show7"/>
          </div>
          <div style="width: 100%" v-else>
            <!--个人基本信息-->
            <account-inform v-if="show4"/>
            <!--实名认证-->
            <realcheck v-if="show2"/>
            <!--修改手机号-->
            <chgphone v-if="show3"/>
            <!--修改密码-->
            <chgpwd v-if="show1"/>
            <!--推广码-->
            <regist :id="id" v-if="show5"/>
            <!--贴现记录查询-->
            <recordsearch v-if="show6"/>
            <cashout v-if="show7"/>
          </div>

        </div>

      </div>
    </div>
    <!--<div style="background: #000;height: 120px;"></div>-->
  </div>
</template>

<script>
import { doGet, doPost } from '@/api/index'
import bgImg from '../../assets/xh-bg.jpg'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import AccountInform from '../menu/accountinform'
import Realcheck from '../menu/realcheck'
import Chgphone from '../menu/chgphone'
import Chgpwd from '../menu/chgpwd'
import Regist from '../menu/regist'
import Recordsearch from '../menu/recordsearch'
import Cashout from '../menu/cashout'
import Topback from '../company/topback'

export default {
  name: 'ChangePassword',
  components: {
    Pagination,
    AccountInform,
    Realcheck,
    Chgphone,
    Chgpwd,
    Regist,
    Recordsearch,
    Cashout,
    Topback
  },
  filters: { },
  data() {
    return {
      bgImg: bgImg,
      show1: false,
      show2: false,
      show3: false,
      show4: true,
      show5: false,
      show6: false,
      show7: false,
      id: undefined
    }
  },
  /*watch: {
    show4: {
      handler: function(route) {
        if (this.id == 1) {
          this.show5 = true
          this.show4 = false
        }
      },
      deep: true
    }
  },*/
  created() {
    if (this.$route.query.id == null) {
      return
    }
    this.id = this.$route.query.id
  },
  methods: {
    active1() {
      if (this.show1 = true) {
        this.show2 = false
        this.show3 = false
        this.show4 = false
        this.show5 = false
        this.show6 = false
        this.show7 = false
      }
    },
    active2() {
      if (this.show2 = true) {
        this.show1 = false
        this.show3 = false
        this.show4 = false
        this.show5 = false
        this.show6 = false
        this.show7 = false
      }
    },
    active3() {
      if (this.show3 = true) {
        this.show1 = false
        this.show2 = false
        this.show4 = false
        this.show5 = false
        this.show6 = false
        this.show7 = false
      }
    },
    active4() {
      if (this.show4 = true) {
        this.show1 = false
        this.show2 = false
        this.show3 = false
        this.show5 = false
        this.show6 = false
        this.show7 = false
      }
    },
    active5() {
      if (this.show5 = true) {
        this.show1 = false
        this.show2 = false
        this.show3 = false
        this.show4 = false
        this.show6 = false
        this.show7 = false
      }
    },
    active6() {
      if (this.show6 = true) {
        this.show1 = false
        this.show2 = false
        this.show3 = false
        this.show4 = false
        this.show5 = false
        this.show7 = false
      }
    },
    active7() {
      if (this.show7 = true) {
        this.show1 = false
        this.show2 = false
        this.show3 = false
        this.show4 = false
        this.show5 = false
        this.show6 = false
      }
    }
  }
}
</script>
<style lang="scss" scoped>
  .dashboard-editor-container {
    padding: 200px 0px 0px;
    background-color: #f7f7f7;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;

    .chart-wrapper {
      background: #fff;
      padding: 16px 16px 0;
      margin-bottom: 32px;
    }
  }
  .top {
    text-align: justify;
    padding: 10px 20px 9px 40px;
    font-size: 16px;
    border-bottom: 1px solid #eee;
    span {
      margin-right: 85%;
    }
  }
  .el-menu-item {
    .svg-icon {
      font-size: 18px;
    }
    span {
      padding-left: 10px;
    }
  }
</style>
